<template>
  <div>
    <div class="header" @mouseover="mouseoverFn" @mouseleave="mouseleaveFn"> 
          <swiper :options="swiperOption" class="swiper-container swiper-pagination1 swiper-box"  ref="mySwiper">
        <!-- 添加的图片 -->
         <swiper-slide>
            <img class="banner-img" src="../../assets/1.jpg" />
         </swiper-slide>
        <swiper-slide>
             <img class="banner-img" src="../../assets/2.jpg" />
        </swiper-slide>
        <swiper-slide>
             <img class="banner-img" src="../../assets/3.jpg" />
        </swiper-slide>
        <!-- 指示点 -->
        <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
    
        <!-- 左右导航栏
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div> -->
        </swiper>
       </div>
   <div class="input-group searchinput">
      <input type="text" class="form-control" placeholder="请输入你想搜索的地区">
      <span class="input-group-btn">
        <button class="btn btn-default mybtn" type="button"><i class="glyphicon glyphicon-zoom-in"></i></button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
   data(){
      return {
swiperOption: {
                 pagination: '.swiper-pagination1',
                 slidesPerView: 'auto',
                //  spaceBetween: 30,
                 centeredSlides: false,
                 
                 onSlideChangeEnd: swiper => {
                   //放swiper的回调方法
                   this.page = swiper.realIndex+1;
                   this.index = swiper.realIndex;
                 },
                 //左右导航栏
                 navigation: {
                   nextEl: '.swiper-button-next',
                   prevEl: '.swiper-button-prev',
                 },
                 //自动播放
                 autoplay:{
                   delay:3000,
                   disableOnInteraction:false
                 },
                 //指示点
                 
                 //循环
                 loop:true
               }


      }
  },
  computed: {
          swiper() {
            return this.$refs.mySwiper.swiper;
          }
        },
 mounted(){
         this.swiper.slideTo(0, 0, false);
         },
     methods:{
         mouseoverFn(){
             this.swiper.autoplay.stop()
         },
         mouseleaveFn(){
             this.swiper.autoplay.start()
         }
     }
};
</script>

<style lang="less" scoped>
.searchinput{
  width: 500px;
  height: 30px;
  position: fixed;
  z-index: 999;
  left: 50%;
  bottom: 75%;
  transform: translate(-50%,-50%);
  // transform: translatey(-50%);
  .mybtn{
    background-color: #337ab7;
    outline: none;
  }
}
 .header{
    height: 456px;
    .swiper-box{
        height: 100%;
        .banner-img{
            width: 100%;
            height: 100%;
        }
    }
}
</style>